<template>
  <view class="login-layout">
    <my-header background-color="transparent"></my-header>
    <my-content class="content">
      <!-- <view class="header">
			<image @click="back()" src="https://www.dingxians.cn/images/box/back.png" class="header_back"></image>
			<view class="header_content">
				<view class="header_title">您好，</view>
				<view class="header_remark">欢迎来到Tiger潮赏。</view>
			</view>
		</view> -->
      <view class="title">
        <view class="header_title">您好</view>
        <view class="header_remark">欢迎来到Tiger潮赏</view>
      </view>
      <view class="login_box">
        <view class="login_item">
          <!-- <view class="login_item_text">手机号</view> -->
          <input
            maxlength="11"
            class="login_item_input"
            type="number"
            v-model="loginParams.mobile"
            placeholder="请输入手机号"
          />
        </view>
        <view class="login_item">
          <!-- <view class="login_item_text">验证码</view> -->
          <input
            maxlength="6"
            class="login_item_input"
            v-model="loginParams.code"
            type="number"
            placeholder="请输入验证码"
          />
          <view class="code" @click="sendCode()" v-if="sendStatus">获取验证码</view>
          <view class="code" v-else style="color: white;">{{ time }}</view>
        </view>
      </view>
      
      <view class="login_btn" v-if="complete" @click="login()">注册/登录</view>
      <view class="login_btn un_complete" v-else>注册/登录</view>

			<view class="agree_box">
        <image
          mode="heightFix"
          @click="changeAgree()"
          v-if="agreeStatus"
          class="agree_icon"
          src="https://www.dingxians.cn/images/common/selected.png"
        ></image>
        <image
          mode="heightFix"
          @click="changeAgree()"
          v-else
          class="agree_icon"
          src="https://www.dingxians.cn/images/common/unselected.png"
        ></image>
        <view class="agree_title">
          我已阅读并同意
          <text class="agree_text" @click="header('/packageB/content/user')">《用户协议》</text>
          <text class="agree_text" @click="header('/packageB/content/privacy')">《隐私协议》</text>
        </view>
      </view>
    </my-content>
    <tfgg-verify @result="verifyResult" ref="verifyElement"></tfgg-verify>
  </view>
</template>

<script>
import api from '../../api/index.js'
import tfggVerify from '@/components/tfgg-verify/tfgg-verify.vue'
export default {
  components: {
    tfggVerify,
  },
  data() {
    return {
      loginParams: {
        mobile: '',
        code: '',
        // market: '',
        wx_code: '',
      },
      pass: false,
      agreeStatus: false,
      sendStatus: true,
      time: 60,
      timer: null,
    }
  },
  onLoad(option) {},
  onShow() {
    this.getMarket()
  },
  computed: {
    complete() {
      return this.loginParams.mobile && this.loginParams.code
    },
  },

  methods: {
    back() {
      uni.navigateBack()
    },
    getMarket() {
      let ua = uni.getSystemInfoSync().platform
      if (/ios/i.test(ua)) {
        this.loginParams.market = 'ios'
      } else if (/android/i.test(ua)) {
        this.loginParams.market = 'android'
      }
    },
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    },
    login() {
      if (!this.agreeStatus) {
        this.show('请先阅读并同意用户协议，隐私协议')
        return
      }
      if (!this.loginParams.mobile) {
        this.show('请输入手机号')
        return
      }
      if (!this.loginParams.code) {
        this.show('请输入验证码')
        return
      }
      var reg = /^1\d{10}$/
      if (!reg.test(this.loginParams.mobile)) {
        this.show('手机号格式错误')
        return false
      }
      uni.showLoading({
        title: '登录中',
      })
      this.handleLogin()
    },
    handleLogin() {
      
      // uni.login({
      //               provider: 'weixin',
      //               success: res => {
      //                 this.loginParams.wx_code = res.code
                      api.users
        .login(this.loginParams)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            uni.hideLoading()
            this.show('登录成功')
            uni.setStorageSync('token', res.data.token)
            uni.setStorageSync('user_id', res.data.user_id)
            uni.setStorageSync('avatar', res.data.avatar)
            uni.setStorageSync('nickname', res.data.nickname)
            uni.setStorageSync('mobile', res.data.mobile)

            uni.switchTab({
              url: '/pages/index/index',
            })
          }
        })
        // .catch((error) => {
        //   console.log(error)
        // })
      //               }
      // })
      
    },
    sendCode() {
      if (!this.agreeStatus) {
        this.show('请先阅读并同意用户协议，隐私协议')
        return
      }
      if (!this.loginParams.mobile) {
        this.show('请输入您的手机号')
        return
      }
      var reg = /^1\d{10}$/
      if (!reg.test(this.loginParams.mobile)) {
        this.show('手机号格式错误')
        return false
      }
      if (!this.pass) {
      	this.verifyFasong()
        return
      }
      uni.showLoading({
        title: '验证码发送中',
      })
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.sendStatus = false
      this.timer = setInterval(() => {
        this.time--
        if (this.time == 0) {
          clearInterval(this.timer)
          this.time = 60
          this.sendStatus = true
        }
      }, 1000)
      api.common
        .sendCode(this.loginParams)
        .then((res) => {
          uni.hideLoading()
          if (res.code == 200) {
            this.show('短信发送成功')
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    /* 校验结果回调函数 */
    verifyResult(res) {
      if (res) {
        this.$refs.verifyElement.reset() //校验成功重置插件
        this.pass = true
        this.sendCode()
      }
    },
    /* 显示校验弹窗 */
    verifyFasong() {
      this.$refs.verifyElement.show()
    },
    /* 校验插件重置 */
    verifyReset() {
      this.$refs.verifyElement.reset()
    },
  },
}
</script>

<style lang="scss" scoped>
.login-layout {
  background-image: url('https://www.dingxians.cn/upload/user_static/user/bg.png');
  background-size: 100% 100%;
  height: 100vh;
}

.header {
  height: 500rpx;
  background-color: #DED000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;

  .header_back {
    width: 65rpx;
    height: 65rpx;
    margin-left: 40rpx;
    margin-top: 80rpx;
  }
  .header_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 80rpx;
    .header_title {
      margin-bottom: 20rpx;
      margin-left: 40rpx;
    }
    .header_remark {
      margin-left: 40rpx;
    }
  }
}

.title {
	margin: 100rpx 60rpx;
	font-size: 50rpx;
	color: white;
	
}

.login_box {
  display: flex;
  flex-direction: column;
  margin: 80rpx 60rpx 0 60rpx;
  .login_item {
    // height: 120rpx;
    // line-height: 120rpx;
		background-color: #292A2E;
		height: 108rpx;
		line-height: 108rpx;
		color: white;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 56rpx;
		padding: 0 32rpx;
    /* padding-bottom: 20rpx; */
    &:last-child {
      margin-bottom: 76rpx;
    }
    .login_item_text {
      font-size: 34rpx;
      margin-right: 40rpx;
      color: #000;
      font-weight: bold;
    }
    .login_item_input {
      font-size: 34rpx;

			&::placeholder {
				color: #808080;
				font-size: 32rpx;
			}
    }
    .code {
      font-size: 30rpx;
      color: #DED000;
      position: absolute;
      top: 50%;
			transform: translateY(-50%);
      right: 40rpx;
    }
  }
}
.agree_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin: 56rpx 0 20rpx 0;
	color: white;
  .agree_icon {
    height: 30rpx;
    margin-right: 10rpx;
  }
  .agree_title {
    display: flex;
    align-items: center;
    justify-content: center;
    .agree_text {
      color: #DED000;
    }
  }
}
.login_btn {
  /* background-color: @color; */
  width: 610rpx;
  border-radius: 10rpx;
  text-align: center;
  height: 84rpx;
  line-height: 84rpx;
  margin: 0 auto;
  color: #fff;
	background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
	background-size: 100% 100%;
  &.un_complete {
		filter: grayscale(1);
  }
}
</style>
